<template>
  <view>
    <zero-loading v-if="loading"></zero-loading>
    <my-search></my-search>
    <view class="blog">
      <view class="blog-box" v-for="(item,i) in blogList" :key="i" >
        <blog :data="item"></blog>
      </view>
    </view>
    <p class="foot" v-if="foot">没有更多数据</p>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loading:true,
        page:0,
        foot:false,
        blogList:[],
        count:9999
      };
    },
    onLoad() {
      this.getbooks(this.page)
    },
    methods:{
      getbooks(pg){
        if(this.count<=this.page){
          this.foot = true
          return uni.$showMsg("没有更多数据")
        }
        uni.$req.req(this,'getbooks',{length:5,random:false,page:pg}).then((res)=>{
          let {result} = res
          this.count = result.count.total
          let data = result.data
          this.page += data.affectedDocs
          this.blogList = [...this.blogList,...data.data]
        })
      }
    },
    onReachBottom() {
      if(this.foot){
        return
      }
      this.getbooks(this.page)
    },
    onPullDownRefresh() {
      this.foot = false
      this.page = 0
      this.blogList = []
      this.count = 999
      this.getbooks(this.page)
        // 关闭下拉刷新效果
        wx.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.blog{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.blog-box{
  margin: 20px;
}
.foot{
  background: #efefef;
  color: #ccc;
  text-align: center;
  font-size: 14px;
  height: 20px;
}
</style>
